import { login, getUserInfo, getUserDetaliById } from "@/api/user"
import { getToken, setToken, removeToken} from "@/utils/auth"
import resetRouter from '@/router/index.js'
export default {
  // 开启命名空间 什么用？（防止冲突） mutation / action 模块名/函数名 防止冲突
  namespaced: true,
  // 定义store数据 响应式 数据变化 引发 视图更新
  state: {
    // 优先在本地取，取不到初始化为空
    // 定义token 接口返回神魔类型 便定义啥类型
    token: getToken() || '',
    // 定义用户信息
    userInfo: {}
  },
  // 定义同步修改方法的 vuex 中只有一种方式修改数据 就是提交一个mutations
  mutations: {
    setToken(state, pyload) {
      // 第一个参数，state
      // 第二个参数，形参 接收外界传递的参数
      state.token = pyload
      // 获取token之后，往本地存一份
      setToken(pyload)
    },
    setUserInfo(state, pyload) {
      state.userInfo = pyload
    },
    // 清空数据
    removeUerInfo(state) {
      state.token = ''
      state.userInfo = {}
      // 清空本地
      removeToken()
      // 重置路由
      resetRouter()
    },
  },
  // 定义异步方法 ajax api 处理异步
  actions: {
    // 接口请求 登录接口
    async fetchLogin(ctx, data) {
      // 第一个参数 ctx
      //第二个参数 形参
      const res = await login(data)
      // 提交mutation ctx中有个方法commit
      ctx.commit('setToken', res)
    },
    // 获取用户接口请求
    async fetchUserInfo(ctx, pyload) {
      //1. 调接口 api
      const res = await getUserInfo()
      // 2. 调用获取用户头像的接口 然后把用户name的接口数据组合在一起 然后再存起来
      const resPhoto = await getUserDetaliById(res.userId)//通过userId查找对应的头像
      // 2. 提交mutation函数
      // 如何把俩个对象合并为一个对象？ {...res,...resPhoto}展开运算符
      // ctx.commit('setUserInfo', res)
      ctx.commit('setUserInfo', {...res, ...resPhoto})
      // 如果你想在dispathch函数调用完之后拿到res 需要把res return出去
      return res
    } 
  },
  
}

/*
state: 放置响应式数据
mutation 放置修改state 数据 且 只有这里才可以修改数据
action 异步的方法 接口调用 
*/

// 管理的模式：dispatch(action)   -> 获取异步数据 -> commit(mutation) -> state 被修改 -> 影响视图
// 一旦完成上面的事 就可以在组件的某个位置触发action函数 

/* 
token属于用户信息 所以写道 user.js
1.登录成功之后我们为您拿到非常重要的token 需要找到一个地方存起来
2.使用vuex作为全局store 对偷看进行统一管理
*/

/* 
为啥要做持久化token？
1. vue基于内存的管理方式，js 引擎里面的 存取速度特别块 vue中使用起来方便，缺点刷新会丢失，浏览器会重置 token也会变为最初的样子
2.localstorage/cookie 基于本地磁盘的 存取速度稍慢 不和vue 绑定 持久化刷新不丢失，除非手动清除

既想方便又想刷新不丢失 -》 vue + localstorage/cookie
如何实现？
.手动实现【重点】
  1.获取到token 之后 一式两份 一份存vuex 一份存本地
  2.vuex state中初始化位置 优先在本地取，本地取得到就用本地，取不到才初始化为空
.借助插件

*/